<template>
  <footer class="app-footer pt-16 pb-8">
    <div class="layout-container">
      <!-- 主要内容 -->
      <div
        class="grid grid-cols-1 md:grid-cols-4 gap-8 pb-10 border-b border-opacity-10 border-text-secondary"
      >
        <!-- 网站介绍 -->
        <div class="md:col-span-1">
          <div class="flex items-center gap-2 mb-4">
            <n-icon size="24" class="text-primary">
              <BookOutline />
            </n-icon>
            <h2 class="text-xl font-bold text-text-primary">
              博客 <span class="text-primary">简历</span>
            </h2>
          </div>
          <p class="text-text-secondary mb-6">
            分享技术、记录成长，一个关于Web开发和设计的个人空间。
          </p>
          <div class="social-links flex gap-3">
            <n-button circle size="small" tag="a" href="#" target="_blank">
              <n-icon>
                <LogoGithub />
              </n-icon>
            </n-button>
            <n-button circle size="small" tag="a" href="#" target="_blank">
              <n-icon>
                <LogoTwitter />
              </n-icon>
            </n-button>
            <n-button circle size="small" tag="a" href="#" target="_blank">
              <n-icon>
                <LogoLinkedin />
              </n-icon>
            </n-button>
            <n-button circle size="small" tag="a" href="#" target="_blank">
              <n-icon>
                <LogoDribbble />
              </n-icon>
            </n-button>
          </div>
        </div>

        <!-- 导航链接 -->
        <div class="md:col-span-1">
          <h3 class="footer-heading">快速导航</h3>
          <ul class="footer-links">
            <li v-for="(item, index) in navItems" :key="index">
              <NuxtLink :to="item.path" class="footer-link">
                {{ item.name }}
              </NuxtLink>
            </li>
          </ul>
        </div>

        <!-- 联系信息 -->
        <div class="md:col-span-1">
          <h3 class="footer-heading">联系方式</h3>
          <ul class="footer-info">
            <li class="flex items-start gap-2">
              <n-icon class="mt-1 text-primary">
                <MailOutline />
              </n-icon>
              <span class="text-text-secondary">hello@example.com</span>
            </li>
            <li class="flex items-start gap-2">
              <n-icon class="mt-1 text-primary">
                <CallOutline />
              </n-icon>
              <span class="text-text-secondary">+86 123 4567 8910</span>
            </li>
            <li class="flex items-start gap-2">
              <n-icon class="mt-1 text-primary">
                <LocationOutline />
              </n-icon>
              <span class="text-text-secondary">北京市朝阳区，中国</span>
            </li>
          </ul>
        </div>

        <!-- 订阅表单 -->
        <div class="md:col-span-1">
          <h3 class="footer-heading">订阅更新</h3>
          <p class="text-text-secondary mb-4">获取最新的文章和项目更新通知</p>
          <div class="subscribe-form">
            <n-input-group>
              <n-input placeholder="您的邮箱地址" />
              <n-button type="primary">订阅</n-button>
            </n-input-group>
          </div>
        </div>
      </div>

      <!-- 版权信息 -->
      <div
        class="copyright pt-6 text-center md:flex md:justify-between md:items-center"
      >
        <div class="text-text-secondary text-sm mb-4 md:mb-0">
          &copy; {{ new Date().getFullYear() }} 个人博客与简历. 保留所有权利.
        </div>
        <div class="flex justify-center gap-4 text-sm">
          <NuxtLink
            to="/privacy"
            class="text-text-secondary hover:text-primary transition-colors"
          >
            隐私政策
          </NuxtLink>
          <NuxtLink
            to="/terms"
            class="text-text-secondary hover:text-primary transition-colors"
          >
            使用条款
          </NuxtLink>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
import {
  BookOutline,
  LogoGithub,
  LogoTwitter,
  LogoLinkedin,
  LogoDribbble,
  MailOutline,
  CallOutline,
  LocationOutline,
} from "@vicons/ionicons5";

const navItems = [
  { name: "首页", path: "/" },
  { name: "简历", path: "/resume" },
  { name: "博客", path: "/blog" },
  { name: "作品集", path: "/portfolio" },
];
</script>

<style scoped lang="scss">
.app-footer {
  background-color: var(--bg-secondary);
  padding-top: 4rem;
  padding-bottom: 2rem;
  border-top: 1px solid rgba(var(--border-color-rgb), 0.1);
  color: var(--text-primary);
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.app-footer::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background-color: var(--primary-color);
  opacity: 0.02;
  border-radius: 50%;
  z-index: 0;
}

.app-footer::after {
  content: "";
  position: absolute;
  top: 50px;
  left: -150px;
  width: 300px;
  height: 300px;
  background-color: var(--primary-color);
  opacity: 0.02;
  border-radius: 50%;
  z-index: 0;
}

.footer-heading {
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
  color: var(--text-primary);
  position: relative;
}

.footer-heading::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 30px;
  height: 3px;
  background-color: var(--primary-color);
  border-radius: 1.5px;
}

.footer-links,
.footer-info {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.75rem;
}

.footer-info li {
  margin-bottom: 1rem;
}

.footer-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease;
  display: inline-block;
  position: relative;
}

.footer-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
}

.footer-link:hover {
  color: var(--primary-color);
  transform: translateX(5px);
}

.footer-link:hover::after {
  width: 100%;
}

.social-links .n-button {
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--text-primary);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.social-links .n-button:hover {
  background-color: var(--primary-color);
  color: white;
  transform: translateY(-3px);
}

.border-opacity-10 {
  border-color: rgba(var(--text-secondary-rgb), 0.1);
}

@media (max-width: 768px) {
  .app-footer {
    padding-top: 3rem;
  }
}
</style>
